<template>
  <div class="mailBlack">
    <header class="set-header">
      <span class="auto_title">黑名单列表</span>
      <el-button size="mini" type="primary" @click="addBlack">
        +添加黑名单
      </el-button>
    </header>
    <div class="gray"></div>
    <!--  列表展示区-->
    <ul class="common-scroll-y" :style="{height:$height - 230+'px'}">
      <li v-for="item in tableData" :key="item.tblackId">
        {{item.blackEmailAccount}} <span class="icon-delete_icon icon operation_icon" @click="delRow(item.tblackId)"></span>
      </li>
    </ul>
    <!--弹出框-->
    <el-dialog
      title="添加黑名单"
      :visible.sync="dialogVisible"
      width="500px"
      :close-on-click-modal="false" :close-on-press-escape	='false'
      center>
      <div class="form" >
        <h1>请输入一个邮箱地址或域名后缀，添加后将拒收该地址来信</h1>
        <input type="text" v-model="form.blackEmailAccount" placeholder="请输入一个邮箱地址或域名后缀" size="small" @keyup.enter="saveInfo">
        <p>如：mail@example.com ，example.com</p>
      </div>
      <!-- 底部按钮-->
      <div slot="footer" class="dialog-footer" align="right">
        <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
        <el-button type="primary" size="mini" @click="saveInfo">确 认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
    import {query, save, del} from "@/api/mail/admin/mail-black";

    export default {
        name: "MailBlack",
        data() {
            return {
                tableData: [],
                dialogVisible: false,
                form: {
                    blackEmailAccount: ""
                }
            }
        },
        mounted() {
            this.getData()
        },
        methods: {
            getData() {
                query().then(res => {
                    this.tableData = res.data.data;
                }).catch(err => {
                    console.log(err)
                });
            },
            addBlack() {
                this.email = '';
                this.dialogVisible = true;
            },
            delRow(id) {
                this.$confirm("确定将选择黑名单删除?", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "success"
                }).then(() => {
                    del(id).then(res => {
                        this.$message({type: "success",message: res.data.msg});
                        this.getData();
                    }).catch(err => {
                        console.log(err)
                    });
                })
            },
            saveInfo() {
                if (!this.form.blackEmailAccount) {
                    this.$message({
                        type: "error",
                        message: '请输入一个邮箱地址或域名后缀'
                    });
                    return;
                }
                save(this.form).then(res => {
                    this.dialogVisible = false;
                    this.$message({
                        type: "success",
                        message: res.data.msg
                    });
                    this.getData();
                }).catch(err => {
                    console.log(err)
                });
            },
        }
    }
</script>

<style scoped lang="scss">
  $activeColor: #2A97F9;
  .mailBlack {
    ul {
      li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 60px;
        padding: 0 30px;
        margin: 0 15px;
        border-bottom: 1px solid #ddd;
      }
    }

    .form {
      h1, p {
        font-size: 14px;
        color: #232323;
        line-height: 35px;
      }

      input {
        border-radius: 5px;
        border: 1px solid #ddd;
        padding: 0 1%;
        line-height: 35px;
        width: 90%;
      }
    }

    button.el-button.addBlack.el-button--primary.el-button--small {
      margin-left: 30px;
    }
  }
</style>
